<template>
	<view class="content">
		<view class="items">
			<view class="item" v-for="(item,index) in list"  @click="choose(item)">
				<view class="top">
					<view class="price">
						<text class="fuhao">￥</text>
						<text>{{item.reduce}}</text>
					</view>
					<view class="name_box">
						<text class="name">满{{item.achieve}}元可用</text>
						<text  v-if="item.cname">此优惠券仅限{{item.cname}}项目使用</text>
					</view>
				</view>
				<view class="bottom">
					<template v-if="item.cate_id === 0 && item.achieve <= Number(money)">
						<view class="" >有效期至 {{$u.timeFormat(item.exittime, 'yyyy.mm.dd. hh:MM')}}</view>
						<view class=" circle" v-if="id!=item.id"></view>
						<image class="" v-else src="/static/selected.png" mode="widthFix"></image>
					</template>
					<template v-else-if="item.cate_id == cate_id && item.achieve <= Number(money)">
						<view class="" >有效期至 {{$u.timeFormat(item.exittime, 'yyyy.mm.dd. hh:MM')}}</view>
						<view class=" circle" v-if="id!=item.id"></view>
						<image class="" v-else src="/static/selected.png" mode="widthFix"></image>
					</template>
					<template v-else>
						<view class="" >不可使用</view>
					</template>
				</view>
			</view>
			<u-empty mode="list" v-if="finish && list.length === 0" style="margin-top: 200rpx;" icon="/static/none.png">
					</u-empty>
		</view>
		<bottomBtn @click="confirm"></bottomBtn>
	</view>
</template>

<script>
	import bottomBtn from '@/components/bottom_btn/bottom_btn.vue'
	export default {
		components:{
			bottomBtn
		},
		data() {
			return {
				current:null,
				page: 1,
				finish: false,
				list: [],
				id: '',
				coupon: '',
				money: '',
				cate_id: ''
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
			}
			this.cate_id = option.cate_id
			this.money = option.money
			console.log(option)
			console.log(option.money)
			this.getList()
		},
		methods: {
			reload() {
				this.page = 1
				this.list = []
				this.finish = false
				this.getList()
			},
			more() {
				this.page++
				this.getList()
			},
			getList() {
				if (this.finish) {
					return
				}
				this.$api.post('/usercoupon', {
					page: this.page,
					type: 0
				}).then(res => {
					if (res.code == 1) {
						this.list = this.list.concat(res.data)
						if (res.data.length === 0) {
							this.finish = true
						}
					}
				}).catch((res) => {
				})
			},
			confirm(){
				console.log(this.coupon)
				uni.$emit('selectCoupon', this.coupon)
				this.$back()
			},
			choose(item){
				if(this.id == item.id){
					this.id = ''
					this.coupon = ''
					return 
				}
				console.log((item.cate_id === 0 && item.achieve <= Number(this.money)) || (item.cate_id == this.cate_id && item.achieve  <= Number(this.money)))
				if((item.cate_id === 0 && item.achieve <= Number(this.money)) || (item.cate_id == this.cate_id && item.achieve  <= Number(this.money))){
					this.id = item.id
					this.coupon = item
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #F6F7FB;
}
.items{
	.item{
		width: 686rpx;
		border-radius: 20rpx;
		background: #FBFBFE;
		box-sizing: border-box;
		margin: 30rpx auto 0;
		.top{
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 28rpx 32rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			.price{
				font-size: 80rpx;
				font-weight: 900;
				color: #E91919;
				padding-right: 50rpx;
				border-right: 1rpx solid #F2F2F2;
				.fuhao{
					font-size: 30rpx;
				}
			}
			.name_box{
				font-size: 22rpx;
				color: #8D93A5;
				display: flex;
				flex-direction: column;
				padding-left: 50rpx;
				line-height: 46rpx;
				.name{
					font-size: 30rpx;
					font-weight: 600;
					color: #1C274C;
				}
			}
		}
		.bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20rpx 32rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #8D93A5;
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
}
</style>
